
<template>
  <div class="home_page">
    <el-row :gutter="15">
      <el-col :span="17">
        <div class="grid-content">
          <div v-show="isIndicators" ref="elememtLeft" class="colHeader">
            <!-- 关键指标 -->
            <div class="list-table defaultHeight fixedHeight">
              <div class="area-header">
                <span class="area-header-title noStyle">{{ $t('关键指标') }}</span>
                <i class="header-right el-icon-setting" @click="indicators()" />
              </div>

              <ul
                v-if="userIndicatorsList && userIndicatorsList.length>0"
                v-loading="loadingTopCenter"
                class="investMes"
              >
                <li v-for="(item, index) in userIndicatorsList" v-show="index<8" :key="index" @click="IndicatorsDetails(item)">
                  <div :style="{'background': item.color}">
                    <i class="indicatorsIcon" />
                    <div class="indicatorsVal">
                      <span :title="$t(item.name)">{{ $t(item.name) }}</span>
                      <i class="numMoney" :title="item.value">{{ item.value }}</i>
                    </div>
                  </div>
                </li>
              </ul>
              <div v-else class="noneData">
                <div>
                  <svg-icon icon-class="none" class-name="none-icon" />
                  <p>{{ $t('暂无数据') }}</p>
                </div>
              </div>
            </div>
          </div>

          <div
            v-show="isLowerLeftLarge"
            class="colContent list-table noPad projectList nowrapTable bigTabs"
            :style="{'padding-top': 0,'min-height':bottomLeftHeight}"
          >
            <!-- 大模块 -->
            <div class="setRight" :style="{'min-height': 'calc( '+ bottomLeftHeight +' - 15px)' }">
              <i class="header-right el-icon-setting" @click="bigToggle" />
              <el-tabs v-if="bigModuleList && bigModuleList.length>0" v-model="bigModule" v-loading="loadingBottomLeft" class="noHeader" @tab-click="bigModuleClick">
                <el-tab-pane v-for="item in bigModuleList" :key="item.id" :label="$t(item.name)" :name="item.name" :lazy="true">
                  <!--动态页面 ，根据is的值来确定渲染哪个组件 -->
                  <component :is="bigModulePath" v-if="item.flag" ref="bigModulePath" :types="true" :parameter="modelParameter" />
                </el-tab-pane>
              </el-tabs>
              <div v-else class="noneData" :style="{'min-height':'calc( '+ bottomLeftHeight +' - 15px)'}">
                <div>
                  <svg-icon icon-class="none" class-name="none-icon" />
                  <p>{{ $t('暂无数据') }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div v-if="isWelcome" class="welcome">
          <i class="el-icon-close" @click="isWelcome = false" />
          <div><p>welcome</p>{{ $t('欢迎使用J博士投资管理系统') }}</div>
        </div>
        <div v-show="isLowerRightSmall" class="list-table noPad noticeRight fixedHeight" :style="{'padding-top': 0,'margin-bottom':'15px'}">
          <div class="mess setRight">
            <i class="header-right el-icon-setting" @click="smallToggle" />
            <!-- 小模块 -->
            <el-tabs v-if="userModuleList && userModuleList.length>0" v-model="userModule" v-loading="loadingTopRight" class="noHeader" @tab-click="userModuleClick">
              <el-tab-pane v-for="item in userModuleList" :key="item.id" :label="$t(item.name)" :name="item.name" :lazy="true">
                <span v-if="item.name === '我的待办'" slot="label" class="label-badge">
                  {{ $t(item.name) }}
                  <i v-if="todoCount > 0 && todoCount < 100" class="badge">{{ todoCount }}</i>
                  <i v-if="todoCount > 99" class="badge">99+</i>
                </span>
                <!--动态页面 ，根据is的值来确定渲染哪个组件 -->
                <component :is="modulePath" v-if="item.flag" ref="modulePath" />
              </el-tab-pane>
            </el-tabs>
            <div v-else class="noneData">
              <div>
                <svg-icon icon-class="none" class-name="none-icon" />
                <p>{{ $t('暂无数据') }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 快捷入口 -->
        <div v-show="isShowQuick" class="list-table mb-15" style="padding-bottom: 5px;">
          <div class="area-header" style="margin-bottom: 0px">
            <span class="area-header-title noStyle">{{ $t('快捷入口') }}</span>
            <i class="header-right el-icon-setting" @click="addRow()" />
          </div>
          <ul
            v-if="quickList && quickList.length>0"
            v-loading="loadingTopLeft"
            class="quick"
          >
            <li v-for="(item, key) in quickList" v-show="key<8" :key="key" @click="changeCompent(item)">
              <div :title="$t(item.name)">
                <img class="quickLogo" :src="item.logo">
                {{ $t(item.name) }}
              </div>
            </li>
          </ul>
          <div v-else class="noneData">
            <div>
              <svg-icon icon-class="none" class-name="none-icon" />
              <p>{{ $t('暂无数据') }}</p>
            </div>
          </div>
        </div>

        <div v-show="isLowerRightMiddle" class="newList list-table noPad" :style="{'padding-top': 0,'padding-bottom': 0, 'overflow':'hidden', 'height': dynamicHeight + 'px'}">
          <div class="block">
            <div class="mess setRight">
              <i class="header-right el-icon-setting" @click="eventToggle" />
              <!-- 进展模块 -->
              <el-tabs v-if="centreModuleList && centreModuleList.length>0" v-model="centreModule" v-loading="loadingBottomRight" class="noHeader event" @tab-click="centreClick">
                <el-tab-pane v-for="item in centreModuleList" :key="item.id" :label="$t(item.name)" :name="item.name" :lazy="true">
                  <span v-if="item.name === '消息通知'" slot="label" class="label-badge">
                    {{ $t(item.name) }}
                    <i v-if="messageCount > 0 && messageCount < 100" class="badge">{{ messageCount }}</i>
                    <i v-if="messageCount > 99" class="badge">99+</i>
                  </span>
                  <!--动态页面 ，根据is的值来确定渲染哪个组件 -->
                  <component :is="eventPath" v-if="item.flag" ref="eventPath" @childHeight="childHeight" />
                </el-tab-pane>
              </el-tabs>
              <div v-else class="noneData">
                <div>
                  <svg-icon icon-class="none" class-name="none-icon" />
                  <p>{{ $t('暂无数据') }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

      </el-col>
    </el-row>
    <!-- 配置快捷入口 -->
    <el-dialog v-el-drag-dialog :title="$t('配置快捷入口')" :visible.sync="newView" width="70%" :close-on-click-modal="false" :lock-scroll="false">
      <div v-loading="loading" class="quickConfig">
        <div class="colHeader newView ">
          <el-col :span="24">
            <div class="area-header">
              <span class="area-header-title">{{ $t('已选中') }}</span>
            </div>
            <draggable
              :list="quickConfigList"
              :disabled="false"
              class="list-group "
              ghost-class="ghost"
              @end="mouseenter('Q')"
            >
              <div
                v-for="(item, index) in quickConfigList"
                v-show="index<8"
                :key="index"
                class="list-group-item"
              >
                <img class="quickLogo" :src="item.logo">
                {{ $t(item.name) }}
                <div v-if="quickConfigList.length>1" class="moveBtn">
                  <el-button type="text" icon="el-icon-delete" @click="remove(item, 'Q')" />
                </div>
              </div>
            </draggable>
          </el-col>
          <!-- 更多选中 -->
          <el-col v-for="(item, index) in chooseConfigList" :key="index" :span="24">
            <div v-for="(type, ind) in item" :key="ind" class="moreGroup">
              <div v-for="(group, gro) in groupList" :key="gro">
                <div v-if="group.dictValue === ind" class="area-header">
                  <span class="area-header-title">{{ $t(group.dictLabel) }}</span>
                </div>
                <ul v-if="group.dictValue === ind" class="openEnter">
                  <li
                    v-for="(typ, inde) in type"
                    :key="inde"
                    :class="{'selected':typ.selected}"
                    @click="selectedConfig(typ, 'Q')"
                  >
                    <img class="quickLogo" :src="typ.logo">
                    {{ $t(typ.name) }}
                  </li>
                </ul>
              </div>
            </div>
          </el-col>
        </div>
      </div>
    </el-dialog>
    <!-- 配置关键指标 -->
    <el-dialog v-el-drag-dialog :title="$t('配置关键指标')" :visible.sync="keyIndicators" width="70%" :close-on-click-modal="false" :lock-scroll="false">
      <div v-loading="loading" class="newMess quickConfig">
        <div class="colHeader keyIndicators">
          <el-col :span="24">
            <div class="area-header">
              <span class="area-header-title">{{ $t('已选中') }}</span>
            </div>
            <draggable
              :list="indicatorsConfigList"
              :disabled="false"
              class="list-group "
              ghost-class="ghost"
              @end="mouseenter('I')"
            >
              <div
                v-for="(item, index) in indicatorsConfigList"
                v-show="index<10"
                :key="index"
                class="list-group-item homeEvent"
              >
                {{ $t(item.name) }}
                <div class="moveBtn">
                  <el-button type="text" icon="el-icon-delete" @click="remove(item, 'I')" />
                </div>
              </div>
            </draggable>
          </el-col>
          <!-- 更多选中 -->
          <el-col v-for="(item, index) in indicatorsConfigdatas" :key="index" :span="24">
            <div v-for="(type, ind) in item" :key="ind" class="moreGroup">
              <div v-for="(group, gro) in groupList" :key="gro">
                <div v-if="group.dictValue === ind" class="area-header">
                  <span class="area-header-title">{{ $t(group.dictLabel) }}</span>
                </div>
                <ul v-if="group.dictValue === ind" class="openEnter indicatorsul defalutGroup">
                  <li
                    v-for="(typ, inde) in type"
                    :key="inde"
                    :class="{'selected':typ.selected}"
                    @click="selectedConfig(typ, 'I')"
                  >
                    {{ $t(typ.name) }}
                  </li>
                </ul>
              </div>
            </div>
          </el-col>

        </div>
      </div>
    </el-dialog>
    <!-- 配置中模块 -->
    <el-dialog v-el-drag-dialog :title="$t('配置最新事件')" :visible.sync="eventOpen" width="50%" :close-on-click-modal="false" :lock-scroll="false">
      <div v-loading="loading" class="newMess quickConfig">
        <div class="colHeader keyIndicators">
          <el-col :span="24">
            <div class="area-header">
              <span class="area-header-title">{{ $t('已选中') }}</span>
            </div>
            <draggable
              :list="centreModuleList"
              :disabled="false"
              class="list-group "
              ghost-class="ghost"
              @end="mouseenter('Z')"
            >
              <div
                v-for="(item, index) in centreModuleList"
                v-show="index<3"
                :key="index"
                class="list-group-item homeEvent"
                :style="{'background': item.color}"
              >
                {{ $t(item.name) }}
                <div v-if="centreModuleList.length>1" class="moveBtn">
                  <el-button type="text" icon="el-icon-delete" @click="remove(item, 'Z')" />
                </div>
              </div>
            </draggable>
          </el-col>
          <!-- 更多选中 -->
          <el-col v-for="(item, index) in centreModuledatas" :key="index" :span="24">
            <div v-for="(type, ind) in item" :key="ind" class="moreGroup">
              <div v-for="(group, gro) in groupList" :key="gro">
                <div v-if="group.dictValue === ind" class="area-header">
                  <span class="area-header-title">{{ $t(group.dictLabel) }}</span>
                </div>
                <ul v-if="group.dictValue === ind" class="openEnter indicatorsul defalutGroup">
                  <li
                    v-for="(typ, inde) in type"
                    :key="inde"
                    :class="{'selected':typ.selected}"
                    @click="selectedConfig(typ, 'Z')"
                  >
                    {{ $t(typ.name) }}
                  </li>
                </ul>
              </div>
            </div>
          </el-col>

        </div>
      </div>
    </el-dialog>
    <!-- 配置大模块 -->
    <el-dialog v-el-drag-dialog :title="$t('配置大模块')" :visible.sync="bigOpen" width="70%" :close-on-click-modal="false" :lock-scroll="false">
      <div v-loading="loading" class="newMess quickConfig">
        <div class="colHeader keyIndicators">
          <el-col :span="24">
            <div class="area-header">
              <span class="area-header-title">{{ $t('已选中') }}</span>
            </div>
            <draggable
              :list="bigModuleList"
              :disabled="false"
              class="list-group "
              ghost-class="ghost"
              @end="mouseenter('D')"
            >
              <div
                v-for="(item, index) in bigModuleList"
                v-show="index<7"
                :key="index"
                class="list-group-item homeEvent"
              >
                {{ $t(item.name) }}
                <div v-if="bigModuleList.length>1" class="moveBtn">
                  <el-button type="text" icon="el-icon-delete" @click="remove(item, 'D')" />
                </div>
              </div>
            </draggable>
          </el-col>
          <!-- 更多选中 -->
          <el-col v-for="(item, index) in bigModuledatas" :key="index" :span="24">
            <div v-for="(type, ind) in item" :key="ind" class="moreGroup">
              <div v-for="(group, gro) in groupList" :key="gro">
                <div v-if="group.dictValue === ind" class="area-header">
                  <span class="area-header-title">{{ $t(group.dictLabel) }}</span>
                </div>
                <ul v-if="group.dictValue === ind" class="openEnter indicatorsul defalutGroup">
                  <li
                    v-for="(typ, inde) in type"
                    :key="inde"
                    :class="{'selected':typ.selected}"
                    @click="selectedConfig(typ, 'D')"
                  >
                    {{ $t(typ.name) }}
                  </li>
                </ul>
              </div>
            </div>
          </el-col>

        </div>
      </div>
    </el-dialog>
    <!-- 配置小模块 -->
    <el-dialog v-el-drag-dialog :title="$t('配置小模块')" :visible.sync="smallOpen" width="50%" :close-on-click-modal="false" :lock-scroll="false">
      <div v-loading="loading" class="newMess quickConfig">
        <div class="colHeader keyIndicators">
          <el-col :span="24">
            <div class="area-header">
              <span class="area-header-title">{{ $t('已选中') }}</span>
            </div>
            <draggable
              :list="smallModuleList"
              :disabled="false"
              class="list-group "
              ghost-class="ghost"
              @end="mouseenter('X')"
            >
              <div
                v-for="(item, index) in smallModuleList"
                v-show="index<3"
                :key="index"
                class="list-group-item homeEvent"
              >
                {{ $t(item.name) }}
                <div v-if="smallModuleList.length>1" class="moveBtn">
                  <el-button type="text" icon="el-icon-delete" @click="remove(item, 'X')" />
                </div>
              </div>
            </draggable>
          </el-col>
          <!-- 更多选中 -->
          <el-col v-for="(item, index) in smallModuledatas" :key="index" :span="24">
            <div v-for="(type, ind) in item" :key="ind" class="moreGroup">
              <div v-for="(group, gro) in groupList" :key="gro">
                <div v-if="group.dictValue === ind" class="area-header">
                  <span class="area-header-title">{{ $t(group.dictLabel) }}</span>
                </div>
                <ul v-if="group.dictValue === ind" class="openEnter indicatorsul defalutGroup">
                  <li
                    v-for="(typ, inde) in type"
                    :key="inde"
                    :class="{'selected':typ.selected}"
                    @click="selectedConfig(typ, 'X')"
                  >
                    {{ $t(typ.name) }}
                  </li>
                </ul>
              </div>
            </div>
          </el-col>

        </div>
      </div>
    </el-dialog>

    <!-- 自定义动态组件 -->
    <el-dialog v-el-drag-dialog :title="$t(title)" :visible.sync="formOpen" width="70%" :close-on-click-modal="false" :lock-scroll="false" :custom-class="customClass">
      <component :is="quickComp" v-if="formOpen" ref="quickComp" :parameter="parameter" />
    </el-dialog>
    <!-- 关键指标明细 -->
    <el-dialog
      v-el-drag-dialog
      :title="$t(indicatorsTitle)"
      :visible.sync="indicatorsOpen"
      width="70%"
      :close-on-click-modal="false"
      custom-class="dialogForm"
      :lock-scroll="false"
      :before-close="handleDialogClose"
    >
      <div id="tableDiv" v-loading="loadingTable" class="tableDiv">
        <el-table
          ref="tableDiv"
          tooltip-effect="darkTable"
          :data="indicatorsList"
          show-summary="true"
          :summary-method="getAmountTotal"
          class="nowrapTable showOnlyLine sortTable table"
          :height="tableHeight"
          border
          @sort-change="dataSort"
        >
          <el-table-column
            :label="$t('序号')"
            type="index"
            align="center"
            show-overflow-tooltip
            width="50"
            fixed="left"
          >
            <template slot-scope="scope">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            v-for="(item, index) in showFieldList"
            :key="index"
            min-width="200"
            sortable="custom"
            :label="item.fieldRemark"
            :prop="item.fieldName"
            show-overflow-tooltip
            :fixed="item.fieldRemark === $t('项目名称')"
          >
            <template slot="header">
              <span class="fieldName">
                <p :title="item.fieldRemark">{{ item.fieldRemark }} </p>
              </span>
              <fieldQuery ref="fieldQuery" :field-val="item" :group-hidden="false" @queryData="getQueryData" />
            </template>
            <template slot-scope="scope">
              <a
                v-if="item.linkType === 'XST'"
                class="link_a"
                @click="blankPath(item.linkAddress, scope.row)"
              >{{ scope.row[item.fieldName] }} </a>
              <a
                v-else-if="item.linkType === 'XYM'"
                class="link_a"
                @click="indicatorsDialog(item.linkAddress, scope.row)"
              >{{ scope.row[item.fieldName] }}</a>
              <div v-else class="cell" :style="(item.type === 'JE' || item.type === 'BL'? 'text-align:right': '')" @click="item.drillDown === 'Y' ? drillDownHandle(item.id, item.fieldName,scope.row) : undefined">
                <el-link v-if="item.drillDown === 'Y'" type="primary" :underline="false">{{ scope.row[item.fieldName] }}</el-link>
                <span v-else>{{ scope.row[item.fieldName] }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col :span="4" style="margin-top: 10px;">
            <el-button
              type="primary"
              class="primary-light-3"
              icon="el-icon-download"
              size="mini"
              @click="exportIndicatorHandle"
            >{{ $t("导出") }}</el-button>
          </el-col>
          <el-col :span="20">
            <pagination
              v-show="total>0"
              class="dealPage"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getIndicatorsList"
            />
          </el-col>
        </el-row>

      </div>
    </el-dialog>

    <el-dialog v-el-drag-dialog :title="$t(drillDownTitle)" :visible.sync="drillDownOpen" width="70%" :close-on-click-modal="false" :lock-scroll="false" append-to-body>
      <drill-down ref="drillDown" @blankPath="blankPath" @indicatorsDialog="indicatorsDialog" />
    </el-dialog>

  </div>
</template>

<script>
import oaMeetingRoomForm from './oa/meeting/oaMeetingRoomForm'
import { userQuickList, userIndicatorsList, userModuleList, quickConfigList, delHomeMainView, save, sort, indicatorsConfigList, findIndicatorsDataList, moduleConfigList } from '@/api/system/home/view/homeMainView'
import { getAsyncComponent } from '@/utils'
import fieldQuery from '@/views/system/search/fieldQuery'
import draggable from 'vuedraggable'
import { todoCount } from '@/api/act/task/actTask'
import { messageCount } from '@/api/system/message/msgBase'
import DrillDown from '@/components/DrillDown'
import { moneyFormat } from '@/utils/ruoyi'
import { getLanguage } from '@/api/dev/language/sysLanguage'
import { findShowModulesByUserId } from '@/api/system/home/template/homeTemplate'

export default {
  components: {
    DrillDown,
    oaMeetingRoomForm,
    draggable,
    fieldQuery
  },
  data() {
    return {
      loadingTopLeft: false,
      loadingTopCenter: false,
      loadingTopRight: false,
      loadingBottomLeft: false,
      loadingBottomRight: false,
      bottomLeftHeight: '',
      indicatorsTitle: '',
      display: 'Simple',
      indicatorsPath: '',
      quickComp: '', // 动态引入的组件
      bigModulePath: '',
      eventPath: '',
      quickList: [], // 快捷入口
      userIndicatorsList: [], // 关键指标
      title: '', // 弹出层标题
      modelHeight: '',
      formOpen: false, // 是否显示弹出层
      loading: false, // 加载
      eventOpen: false, // 配置事件展示
      bigOpen: false,
      smallOpen: false,
      indicatorsOpen: false,
      loadingTable: false,
      lock: true,
      bigModule: '',
      // 待办数量
      todoCount: 0,
      // 消息数量
      messageCount: 0,
      userModule: '', // 小模块选中
      userModuleList: [], // 小模块列表
      centreModule: '',
      centreModuledatas: [], // 中模块
      centreModuleList: [], // 中模块
      bigModuledatas: [], // 中模块
      bigModuleList: [], // 中模块
      modulePath: '', // 动态地址
      newView: false, // 快捷入口
      keyIndicators: false, // 关键指标
      quickConfigList: [], // 快捷入口配置
      chooseConfigList: [], // 快捷入口默认展示
      groupList: [], // 快捷入口分组标题
      indicatorsConfigList: [], // 关键指标
      indicatorsConfigdatas: [], // 关键指标,
      indicatorsList: [],
      showFieldList: [],
      smallModuleList: [],
      smallModuledatas: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      searchQueryList: [],
      dynamicHeight: 200,
      parameter: {},
      modelParameter: {},
      drillDownTitle: '',
      drillDownOpen: false,
      tableHeight: 200,
      customClass: 'dialogForm homeForm',
      isWelcome: false,
      // 首页展示模块 - 根据首页模板展示模块判断
      showModules: [],
      // 快捷入库
      isShowQuick: false,
      // 关键指标
      isIndicators: false,
      // 右上小模块
      isLowerRightSmall: false,
      // 右下中模块
      isLowerRightMiddle: false,
      // 左下大模块
      isLowerLeftLarge: false
    }
  },
  created() {
    // 快捷入口分组类型
    this.getDicts('home_group').then(response => {
      this.groupList = response.data
    })
    this.getLanguage()
    // 获取展示模块
    this.gainShowModules()
  },
  mounted() {
    this.$bus.$on('Refresh', this.geTTodoCount) // 刷新查询待办数量
    this.$bus.$on('Refresh', this.getMessageCount) // 刷新查询待办数量
    this.geTTodoCount() // 刷新查询待办数量
    this.getMessageCount() // 刷新查询待办数量
    window.onresize = () => {
      return (() => {
        if (this.$refs.elememtLeft && this.$refs.elememtLeft?.$clientHeight !== undefined) {
          const windowHeight = window.innerHeight - 130 - this.$refs.elememtLeft.clientHeight
          this.bottomLeftHeight = this.modelHeight = windowHeight + 'px'
        }
      })()
    }
    this.$nextTick(() => {
      const windowHeight = window.innerHeight - 130 - this.$refs.elememtLeft.clientHeight
      this.bottomLeftHeight = this.modelHeight = windowHeight + 'px'

      this.leftTopLoad()
      this.centerTopLoad()
      this.rightTopLoad()
      this.leftBottomLoad()
      this.rightBottomLoad()
    })
  },
  methods: {
    gainShowModules() {
      findShowModulesByUserId(this.$store.state.user.userId).then(response => {
        if (response.code === 200) {
          this.showModules = response.data
          this.isShowQuick = !!(this.showModules && this.showModules.includes('KJRH'))
          this.isIndicators = !!(this.showModules && this.showModules.includes('GJZB'))
          this.isLowerRightSmall = !!(this.showModules && this.showModules.includes('YSX'))
          this.isLowerRightMiddle = !!(this.showModules && this.showModules.includes('YXZ'))
          this.isLowerLeftLarge = !!(this.showModules && this.showModules.includes('ZXD'))
          console.log(this.isLowerLeftLarge, this.isIndicators, this.isLowerRightSmall, this.isLowerRightMiddle, this.isLowerLeftLarge, '??')
        }
      })
    },
    geTTodoCount() {
      // 查询待办数量
      todoCount().then(response => {
        if (response.code === 200) {
          this.todoCount = response.data
        } else {
          this.todoCount = 0
        }
      })
    },
    getMessageCount() {
      // 查询待办数量
      messageCount().then(response => {
        if (response.code === 200) {
          this.messageCount = response.data
        } else {
          this.messageCount = 0
        }
      })
    },
    childHeight(val) {
      if (val > 600) {
        this.dynamicHeight = 600
      } else if (val === 0) {
        this.dynamicHeight = 200
      } else {
        this.dynamicHeight = val + 80
      }
    },
    leftTopLoad() {
      // 快捷入口
      this.loadingTopLeft = true
      userQuickList('pc').then(res => {
        this.quickList = res.data
        this.loadingTopLeft = false
        // this.isWelcome = true
      })
    },
    centerTopLoad() {
      // 关键指标
      this.loadingTopCenter = true
      userIndicatorsList().then(res => {
        this.userIndicatorsList = res.data
        this.loadingTopCenter = false
      })
    },
    rightTopLoad() {
      // 小模块
      this.loadingTopRight = true
      userModuleList('X').then(res => {
        if (res.data !== [] && res.data.length > 0) {
          this.userModuleList = res.data
          this.loadingTopRight = false
          this.$set(this.userModuleList, 'flag', false)
          this.userModule = res.data[0].name
          this.userModuleClick(res.data[0])
        } else {
          this.loadingTopRight = false
        }
      })
    },
    leftBottomLoad() {
      // 大模块
      this.loadingBottomLeft = true
      userModuleList('D').then(res => {
        if (res.data !== [] && res.data.length > 0) {
          this.bigModuleList = res.data
          this.loadingBottomLeft = false
          this.$set(this.bigModuleList, 'flag', false)
          this.bigModule = res.data[0].name
          this.bigModuleClick(res.data[0])
        } else {
          this.loadingBottomLeft = false
        }
      })
    },
    rightBottomLoad() {
      // 中模块
      this.loadingBottomRight = true
      userModuleList('Z').then(res => {
        if (res.data !== [] && res.data.length > 0) {
          this.centreModuleList = res.data
          this.loadingBottomRight = false
          this.$set(this.centreModuleList, 'flag', false)
          this.centreModule = res.data[0].name
          this.centreClick(res.data[0])
        } else {
          this.loadingBottomRight = false
        }
      })
    },
    // 跳转新页面
    blankPath(path, data) {
      const routeData = this.$router.resolve({ path: path, query: { id: (data['项目ID'] || data['基金ID']), companyId: data['标的公司ID'], gpId: data['管理公司ID'] }})
      window.open(routeData.href, '_blank')
    },
    // 弹出明细
    indicatorsDialog(path, data) {
      this.formOpen = true
      this.quickComp = getAsyncComponent(path)
      this.title = data['项目名称']
      this.asyncId = data['现金流ID']
      this.loadComponent()
    },
    // 加载明细
    loadComponent() {
      var data = {}
      data.id = this.asyncId
      this.$bus.$on('async_done', () => {
        this.$refs.quickComp && this.$refs.quickComp.init(data)
      })
      this.$refs.quickComp && this.$refs.quickComp.init(data)
    },
    // 字段查询
    getQueryData(data) {
      if (!(this.searchQueryList instanceof Array)) {
        this.$set(this, 'searchQueryList', [])
      }
      this.$nextTick(() => {
        var searchQueryTempList = []
        this.searchQueryList.forEach(item => {
          if (item.fieldName !== data.fieldName) {
              searchQueryTempList.push(item)
          }
        })
        this.searchQueryList = searchQueryTempList
        if (data.value !== '' || data.conditions !== '') {
          this.searchQueryList.push(data)
        }
        this.queryParams.searchQueryVoList = this.searchQueryList
          this.loadingTable = true
          this.indicatorsList = []
          findIndicatorsDataList(this.queryParams).then(res => {
            this.indicatorsList = res.data.rows
            this.showFieldList = res.datas.showFieldList
            this.total = res.data.total
            this.loadingTable = false
          })
        })
    },
    // 排序
    dataSort(column) {
      this.loadingTable = true
      // this.queryParams.pageNum = 1
      // this.queryParams.pageSize = 10
      var searchOrderByVo = {}
      searchOrderByVo.prop = column.prop
      searchOrderByVo.order = column.order
      this.queryParams.searchOrderByVo = searchOrderByVo
      findIndicatorsDataList(this.queryParams).then(res => {
        this.indicatorsList = res.data.rows
        this.loadingTable = false
      })
    },
    // 关键指标金额合计行
    getAmountTotal(param) {
      const { columns } = param
      const sums = []
      if (this.indicatorsList && this.showFieldList) {
        // 是否有合计行
        var isTotal = 0
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          this.showFieldList.forEach((item) => {
            if (item.type === 'JE' && item.fieldName === column.label) {
              isTotal = 1
              sums[index] = moneyFormat(item.jeTotal)
            }
          })
        })
        if (isTotal === 0) {
          return []
        }
        return sums
      }
    },
    moneyFormat(val) {
      return moneyFormat(val, 'w')
    },
    // 关键指标明细
    IndicatorsDetails(data) {
      if (data.showDataList === 'Y') {
        this.indicatorsOpen = true
        this.$nextTick(() => {
          var tableDiv = document.getElementById('tableDiv')
          console.log(tableDiv.clientHeight)
          this.tableHeight = tableDiv.clientHeight - 80
        })
        this.indicatorsTitle = data.name
        this.$set(this, 'queryParams', data)
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = 10
        this.queryParams.searchQueryVoList = []
        this.getIndicatorsList()
      }
    },
    // 关闭关键指标明细
    handleDialogClose() {
      this.indicatorsOpen = false
      this.$nextTick(() => {
        this.$refs.fieldQuery && this.$refs.fieldQuery.forEach(item => {
          item.visible = false
        })
      })
    },
    // 关键指标查询数据
    getIndicatorsList() {
      this.loadingTable = true
      this.showFieldList = this.indicatorsList = []
      findIndicatorsDataList(this.queryParams).then(res => {
        this.showFieldList = res.datas.showFieldList
        this.indicatorsList = res.data.rows
        this.total = res.data.total
        // 表格闪动
        setTimeout(() => {
          this.loadingTable = false
          this.$refs.tableDiv.doLayout()
        }, 10)
      })
    },

    // 拖拽排序
    mouseenter(type) {
      const row = []
      if (type === 'Q') {
          this.quickConfigList.forEach(item => {
            row.push(item.id)
          })
      } else if (type === 'I') {
          this.indicatorsConfigList.forEach(item => {
            row.push(item.id)
          })
      } else if (type === 'Z') {
          this.centreModuleList.forEach(item => {
            row.push(item.id)
          })
      } else if (type === 'D') {
          this.bigModuleList.forEach(item => {
            row.push(item.id)
          })
      } else if (type === 'X') {
          this.smallModuleList.forEach(item => {
            row.push(item.id)
          })
      }
      sort(row).then(() => {
        this.msgSuccess(this.$t('排序成功'))
        this.load()
      })
    },
    // 多选快捷模块
    selectedConfig(item, type) {
        if (type === 'Q') { // 快捷入口
            if (this.quickConfigList.length < 8) {
              this.quickConfigList.push(item)
              const row = {
                'configId': item.id,
                'type': 'Q'
              }
              save(row).then(() => {
                this.msgSuccess(this.$t('添加成功'))
                this.quickLoad()
                this.leftTopLoad()
              })
            } else {
              this.msgError(this.$t('最多展示8个'))
            }
        } else if (type === 'I') { // 关键指标
          if (this.indicatorsConfigList.length < 8) {
            this.indicatorsConfigList.push(item)
            const row = {
              'configId': item.id,
              'type': 'I'
            }
            save(row).then(() => {
              this.msgSuccess(this.$t('添加成功'))
              this.indicatorsLoad()
              this.centerTopLoad()
            })
          } else {
            this.msgError(this.$t('最多展示8个'))
          }
        } else if (type === 'Z') { // 进展
          if (this.centreModuleList.length < 3) {
            this.centreModuleList.push(item)
            const row = {
              'configId': item.id,
              'type': 'Z'
            }
            save(row).then(() => {
              this.msgSuccess(this.$t('添加成功'))
              this.eventLoad()
              this.rightBottomLoad()
            })
          } else {
            this.msgError(this.$t('最多展示3个'))
          }
        } else if (type === 'D') { // 大模块
          if (this.bigModuleList.length < 7) {
            this.bigModuleList.push(item)
            const row = {
              'configId': item.id,
              'type': 'D'
            }
            save(row).then(() => {
              this.msgSuccess(this.$t('添加成功'))
              this.bigLoad()
              this.leftBottomLoad()
            })
          } else {
            this.msgError(this.$t('最多展示7个'))
          }
        } else if (type === 'X') { // 小模块
          if (this.smallModuleList.length < 3) {
            this.smallModuleList.push(item)
            const row = {
              'configId': item.id,
              'type': 'X'
            }
            save(row).then(() => {
              this.msgSuccess(this.$t('添加成功'))
              this.smallLoad()
              this.rightTopLoad()
            })
          } else {
            this.msgError(this.$t('最多展示3个'))
          }
        }
    },

    // 删除首页配置
    remove(data, type) {
      this.$confirm(this.$t('是否确认隐藏') + data.name + '?', this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }).then(() => {
            return delHomeMainView(data.id)
        }).then(() => {
          this.msgSuccess(this.$t('隐藏成功'))
          if (type === 'Q') {
            this.quickLoad('delete')
            // this.leftTopLoad()
          } else if (type === 'I') {
            this.indicatorsLoad()
            this.centerTopLoad()
          } else if (type === 'Z') {
            this.eventLoad()
            this.rightBottomLoad()
          } else if (type === 'D') {
            this.bigLoad()
            this.leftBottomLoad()
          } else if (type === 'X') {
            this.smallLoad()
            this.rightTopLoad()
          }
        })
    },
    // 切换小模块
    userModuleClick(tab) {
      this.userModuleList && this.userModuleList.forEach(item => {
        if (item.name === tab.name) {
          this.$nextTick(() => {
            if (item.component != null) {
               this.$set(item, 'flag', true)
               this.modulePath = getAsyncComponent(item.component)
            }
          })
        } else {
          this.$set(item, 'flag', false)
        }
      })
      this.loadingTopRight = false
    },
    // 切换大模块
    bigModuleClick(tab) {
      this.bigModuleList && this.bigModuleList.forEach(item => {
        if (item.name === tab.name) {
          this.$nextTick(() => {
            if (item.component != null) {
               this.$set(item, 'flag', true)
               // 携带有参数 表单配置
               if (item.component.lastIndexOf('?') > -1) {
                    const index = item.component.lastIndexOf('?')
                    const sMenuPath = item.component.substring(0, index)
                     // 增加参数
                    const newKey = item.component.split('?')[1]
                    var newstr = newKey.replace(/=/g, '":"')
                    this.modelParameter = JSON.parse('{"' + newstr.replace(/&/g, '","') + '"}')
                    this.bigModulePath = getAsyncComponent(sMenuPath)
               } else {
                this.bigModulePath = getAsyncComponent(item.component)
               }
            }
          })
        } else {
          this.$set(item, 'flag', false)
        }
      })
    },
    // 切换进展模块
    centreClick(tab) {
      if (tab.name === '项目最新事件') {
        this.dynamicHeight = 600
      }
      this.centreModuleList && this.centreModuleList.forEach(item => {
        if (item.name === tab.name) {
          this.$nextTick(() => {
            if (item.component != null) {
               this.$set(item, 'flag', true)
               this.eventPath = getAsyncComponent(item.component)
            }
          })
        } else {
          this.$set(item, 'flag', false)
        }
      })
      this.loadingBottomRight = false
    },

    // 快捷入口组件切换
    changeCompent(item) {
      this.customClass = 'dialogForm homeForm'
      // console.log('item', item)
      // 是否设计表单路径
      var whetherForm = item.component.indexOf('dev/form/base/form') > -1
      if (whetherForm) {
        this.customClass = 'magicalForm'
      }
      var checkForm = item.component.indexOf('@/views/file/documentCheck/documentCheckForm') > -1
      if (checkForm) {
        this.customClass = 'docCheck'
      }
      // 是否带参数
      if (item.component.lastIndexOf('?') > -1) {
        const index = item.component.lastIndexOf('?')
        const sMenuPath = item.component.substring(0, index)
        this.quickComp = getAsyncComponent(sMenuPath)
        // 增加参数
        const newKey = item.component.split('?')[1]
        var newstr = newKey.replace(/=/g, '":"')
        this.parameter = JSON.parse('{"' + newstr.replace(/&/g, '","') + '"}')
      } else {
        this.quickComp = getAsyncComponent(item.component)
      }
      this.formOpen = true
      this.title = item.name
      this.$bus.$once('async_done', () => {
        this.$nextTick(() => {
          if (this.$refs.quickComp?.init !== undefined) {
            this.$refs.quickComp && this.$refs.quickComp.init()
          }
        })
      })
      if (this.$refs.quickComp?.init !== undefined) {
        this.$refs.quickComp && this.$refs.quickComp.init()
      }
    },
    // 快捷入口
    addRow() {
      this.newView = true
      this.quickLoad()
    },
    quickLoad(type) {
      // 快捷入口配置页面
      this.loading = true
      quickConfigList('pc').then(res => {
        this.quickConfigList = res.data
        this.chooseConfigList = res.datas
        if (type === 'delete') {
          this.leftTopLoad()
        }
        this.loading = false
      })
    },
    // 关键指标
    indicators() {
      this.keyIndicators = true
      this.indicatorsLoad()
    },
    indicatorsLoad() {
      // 查询首页的关键指标配置页面
      this.loading = true
      indicatorsConfigList().then(res => {
        this.indicatorsConfigList = res.data
        this.indicatorsConfigdatas = res.datas
        this.loading = false
      })
    },
    eventToggle() {
      // 中模块
      this.eventOpen = true
      this.eventLoad()
    },
    // 中模块
    eventLoad() {
      this.loading = true
      moduleConfigList('Z').then(res => {
        this.centreModuleList = res.data
        this.centreModuledatas = res.datas
        this.loading = false
        res.data.forEach(v => {
          if (v.name === this.centreModule) {
            this.centreClick(v)
          }
        })
      })
    },
    bigToggle() {
      // 大模块
      this.bigOpen = true
      this.bigLoad()
    },
    // 大模块
    bigLoad() {
      this.loading = true
      moduleConfigList('D').then(res => {
        this.bigModuleList = res.data
        this.bigModuledatas = res.datas
        this.loading = false
        res.data.forEach(v => {
          if (v.name === this.bigModule) {
            this.bigModuleClick(v)
          }
        })
      })
    },
    smallToggle() {
      // 小模块
      this.smallOpen = true
      this.smallLoad()
    },
    // 小模块
    smallLoad() {
      this.loading = true
      moduleConfigList('X').then(res => {
        this.smallModuleList = res.data
        this.smallModuledatas = res.datas
        this.loading = false
      })
    },
    // 导出关键指标详情
    exportIndicatorHandle() {
      this.downLoadExcelPost('/indicators/homeIndicators/exportIndicator', this.queryParams)
    },
    drillDownHandle(fieldId, name, row) {
      console.log('----------------')
      console.log(fieldId, name, row)
      this.drillDownOpen = true
      this.drillDownTitle = name
      this.$nextTick(() => {
        this.$refs.drillDown.getIndicatorsList(fieldId, row)
      })
    },
    getLanguage() {
      var localStorage = window.localStorage.getItem('language')
      if (localStorage === undefined || localStorage === null || localStorage === 'null') {
        localStorage = 'zh_cn'
      }
      getLanguage(localStorage, undefined).then(response => {
        this.$i18n.vm.messages[localStorage] = response.languageData
        // 修改国际化词条
        window.localStorage.setItem('language_' + localStorage, JSON.stringify(response.languageData))
        window.localStorage.setItem('language', localStorage)
        this.$i18n.locale = localStorage
      })
    }

  }
}
</script>

<style scoped lang="scss">
.bigTabs{
  min-height: 400px;
}
.moveBtn {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 5px;
  right: 5px;
}

.moveBtn .el-button {
  padding: 0;
  color: red;
}

.checkedBtn li.selected {
  position: relative;
}

.checkedBtn li.selected:before {
  position: absolute;
  content: "";
  display: block;
  width: 18px;
  height: 16px;
  border-bottom-left-radius: 18px;
  right: 0;
  background: #99b8e0;
  top: 0;
}

.checkedBtn li.selected:after {
  position: absolute;
  content: "";
  display: block;
  top: 1px;
  right: 4px;
  width: 4px;
  height: 7px;
  border-style: solid;
  border-color: white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.checkedBtn li {
  border: 1px solid #dcdfe6;
  padding: 9px 20px 9px 10px;
  border-radius: 3px;
  height: 40px !important;
  box-sizing: border-box;
  line-height: normal;
  width: auto !important;
  margin-right: 10px !important;
  margin-bottom: 10px !important;
}

.setRight {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.setRight .el-tabs {
  height: 100%;
}

.setRight .el-icon-setting {
  position: absolute;
  right: 0px;
  top: 8px;
  z-index: 9;
}

.entrance li {
  position: relative;
}

.entrance li i.el-icon-close {
  position: absolute;
  top: 10px;
  right: 5px;
  color: #ffffff;
  margin: 0 !important;
  padding: 3px;
  font-size: 13px;
}

.indicatorsItem .el-tag {
  margin-bottom: 5px;
  margin-right: 5px;
}

.indicatorsItem {
  margin-bottom: 15px;
}

.indicatorsItem ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: inline-block;
}

.indicatorsItem ul li {
  width: calc(50% - 5px);
  text-align: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.indicatorsItem ul li:nth-child(2n) {
  margin-right: 0px;
}

.indicatorsItem ul li .el-input .el-input__inner {
  border-radius: 0px;
  border: 0px solid #dcdfe6;
  font-size: 12px;
  height: 32px;
  line-height: 32px;
}

.indicatorsItem ul li div span {
  background: #409eff;
  padding: 10px;
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #fff;
}

.keyIndicators {
  display: block !important;
}

.el-timeline-item__content h4 {
  margin-top: 0;
}

.newView {
  display: block !important;
}

.newView li {
  position: relative;
}

.newView li.selected:before {
  position: absolute;
  content: "";
  display: block;
  width: 18px;
  height: 16px;
  border-bottom-left-radius: 18px;
  right: 0;
  top: 0;
  background: #99b8e0;
}

.newView li.selected:after {
  position: absolute;
  content: "";
  display: block;
  top: 1px;
  right: 4px;
  width: 4px;
  height: 7px;
  border-style: solid;
  border-color: white;
  border-width: 0 2px 2px 0;
  transform: rotateZ(45deg);
}

.header-right {
  font-size: 18px;
  float: right;
  cursor: pointer;
}

li {
  list-style: none;
}

.el-timeline-item__tail {
  left: 5px;
  border-left: 1px solid #e4e7ed;
}

.el-timeline-item__node--large {
  left: 2px;
  width: 6px;
  height: 6px;
}

.el-tabs__item {
  padding: 0 10px;
}

.el-table__header th {
  background-color: #f6f7fb !important;
  padding: 7px 0;
}

.el-table .cell {
  white-space: nowrap;
}

.el-table td {
  padding: 6px 0;
  font-size: 13px;
}

.colHeader {
  margin-bottom: 15px;
  display: flex;
}

.colHeader .list-table {
  flex: 1;
  margin-right: 15px;
}

.colHeader .list-table:last-child {
  margin-right: 0px;
}

.colHeader ul {
  padding: 0;
  width: 100%;
  /* min-height: 150px; */
}

.colContent {
  height: calc(100% - 235px);
}

.colHeader li {
  list-style: none;
  width: 80px;
  height: auto;
  float: left;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
}

.quick li {
  width: 25% !important;
  padding: 4px;
  float: left;
  cursor: pointer;
  font-size: 13px;
}

.quick li > div {
  padding: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

.quick li > div i {
  height: 30px !important;
  width: 30px !important;
  margin: 7px auto !important;
}

.investMes {
  overflow: hidden!important;
  li {
    text-align: left;
    padding: 5px;
    width: 25%;
    font-size: 12px;
    height: auto;
    margin: 0;
    background: #fff;
    div {
      padding: 11px 15px;
      color: #fff;
      border-radius: 5px;
      height: 70px;
      align-items: center;
      p{
        margin: 0;
        display: flex;
        align-items: center;
        margin-top: 8px;
        /deep/ .svg-icon{
          height: 20px;width: 15px;
        }
        span{
           display: block;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
           z-index: 9;
           font-size: 13px;
           position: relative;
           margin-left: 5px;
         }
      }
      i{
        font-style: normal;
        font-size: 20px;
        font-weight: bold;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        z-index: 9;
        position: relative;
      }
    }
  }
}

.investMes li > div font i {
  display: inline-block;
  font-size: 13px;
  margin: 0;
}

.openEnter li i {
  margin: 13px auto !important;
  height: 30px !important;
  width: 30px !important;
}

.el-timeline-item__content {
  font-size: 13px;
}

.el-row,
.el-col,
.grid-content {
  height: 100%;
}

.el-timeline {
  padding-left: 15px;
}
.investMes,
.quick {
  overflow: hidden;
}
.showOnlyLine{
  min-height: 400px;
  height: 100vh;
}

/deep/.table .el-table__fixed {
  height: calc(100% + 17px) !important;
  .el-table__fixed-footer-wrapper {
    bottom: 17px;
  }
}
/deep/.table .el-table__fixed-right {
  height: calc(100% + 17px) !important;
  .el-table__fixed-footer-wrapper {
    bottom: 17px;
  }
}
/** 合计行内容靠右 */
/deep/.el-table .el-table__footer-wrapper .cell{
  text-align: right;
}

.none-icon{
  width:100px;
  height:100px;
}
</style>
